<!--
 * @FileDescription 传感器信息页面
 * @Author lz
 * @Date 20230201 18:25:27
 * @LastEditors lz
 * @LastEditTime 20230201 18:25:27
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="1" :ID="0"></hdrModel>
        <api-outlined class="outlined" @click="linkBtn" />
        <!-- 显示内容 -->
        <div class="wpBox">
            <div id="allmap"></div>
        </div>
        <!-- 传感器图像 -->
        <div class="videoBox">
            <img v-if="checkMm == 1" :src="sensorData.Default.imageData_six.value">
            <img v-if="checkMm == 2" :src="sensorData.Default.imageData_twelve.value">
        </div>
        <!-- 传感器信息 + 激光雷达 + 相机 -->
        <!-- <div class="Information">
            <div class="tit">组合惯导</div>
            <div class="row_Infor">
                <div class="col_l">航向角:</div>
                <div class="col_r">{{ sensorData.Default.heading.value }}°</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">俯仰角:</div>
                <div class="col_r">{{ sensorData.Default.pitch.value }}°</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">卫星数量:</div>
                <div class="col_r">{{ sensorData.Default.num_sats_tracked.value }}颗</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">海拔:</div>
                <div class="col_r">{{ sensorData.Default.height_msl.value }}M</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">经度:</div>
                <div class="col_r">{{ sensorData.Default.lon.value }}°</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">纬度:</div>
                <div class="col_r">{{ sensorData.Default.lat.value }}°</div>
            </div>
        </div> -->
        <!-- 点云设置 -->
        <div class="pointCloudSettings">
            <div class="innerBox">
                <div class="tit innerBox_tit">激光雷达</div>
                <img src="/public/images/分割线.png" style="margin-left: 28px; margin-top: -5px;">
                <div class="row_setUp">
                    <div class="inp_l">点半径(0.01~0.1)mm:</div>
                    <div class="inp_r"> <a-input v-model:value="state.value" @blur="changeRadius(state.value,state.checked_color)"/></div>
                </div>
                <a-radio-group v-model:value="state.checked_color" class="radioCheck" @change="changeColor(state.value,state.checked_color)">
                  <a-radio style="display: block;" :value="true">区分距离</a-radio>
                  <a-radio :value="false">区分反射率</a-radio>
                </a-radio-group>                
                
                <div class="tit">相机</div>
                <img src="/public/images/分割线.png" style="margin-left: 28px; margin-top: -5px; margin-bottom: 7px;">
                <a-radio-group v-model:value="checkMm" class="radioCheck">
                  <a-radio style="display: block;" :value="1">显示6mm相机图像</a-radio>
                  <a-radio :value="2">显示12mm相机图像</a-radio>
                </a-radio-group>

                <div class="tit">组合惯导</div>
                <img src="/public/images/分割线.png" style="margin-left: 28px; margin-top: -5px;">
                <div class="row_Infor">
                    <div class="col_l">航向角:</div>
                    <div class="col_r">{{ sensorData.Default.heading.value }}°</div>
                </div>
                <div class="row_Infor">
                    <div class="col_l">俯仰角:</div>
                    <div class="col_r">{{ sensorData.Default.pitch.value }}°</div>
                </div>
                <div class="row_Infor">
                    <div class="col_l">卫星数量:</div>
                    <div class="col_r">{{ sensorData.Default.num_sats_tracked.value }}颗</div>
                </div>
                <div class="row_Infor">
                    <div class="col_l">海拔:</div>
                    <div class="col_r">{{ sensorData.Default.height_msl.value }}M</div>
                </div>
                <div class="row_Infor">
                    <div class="col_l">经度:</div>
                    <div class="col_r">{{ sensorData.Default.lon.value }}°</div>
                </div>
                <div class="row_Infor">
                    <div class="col_l">纬度:</div>
                    <div class="col_r">{{ sensorData.Default.lat.value }}°</div>
                </div>

            
                <!-- <a-checkbox v-model:checked="state.checked_color" style="color: #fff;" class="checkBox" @change="changeColor(state.value,state.checked_color)">区分反射率</a-checkbox>
                <div class="row_setUp">
                    <div class="inp_l">点亮度:</div>
                    <div class="inp_r"> <a-input v-model:value="state.value" /></div>
                </div>
                <div class="tit">超声波雷达预警设置</div>
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">显示预警状态</a-checkbox><br />
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">显示障碍物标签</a-checkbox>

                <div class="tit">障碍物设置</div>
                <a-checkbox-group v-model:value="state.value">
                    <a-row class="checkBox">
                        <a-col :span="24">
                            <a-checkbox value="A" style="color: #fff;">显示障碍物</a-checkbox>
                        </a-col>
                        <a-col :span="24">
                            <a-checkbox value="B" style="color: #fff;">显示障碍物标签</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="C" style="color: #fff;">ID</a-checkbox>
                        </a-col>
                        <a-col :span="16">
                            <a-checkbox value="D" style="color: #fff;">类型</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">X</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">Y</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">Z</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">长</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">宽</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">高</a-checkbox>
                        </a-col>
                    </a-row>
                </a-checkbox-group> -->
            </div>
        </div>
        <!-- <locationMark></locationMark> -->
        <networkPrompt v-if="HomeContent.Default.sensorType.value"></networkPrompt>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, watch } from 'vue'
import hdrModel from '../header/index.vue'
import locationMark from './model/locationMark.vue'
import networkPrompt from './model/networkPrompt.vue'
import sensorData from "@components/Apps/Simulation/sensorModel/sensor";
import HomeContent from '../HomeContent';
import { ApiOutlined } from '@ant-design/icons-vue';
import { jsonp } from "vue-jsonp";
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
const checkMm = ref(1)
const checkColor = ref(1)
const state = reactive({
    value: 0.01,
    checked: ref(true),
    checked_color: ref(true),
    lng: 119.404404,
    lat: 39.909789,
});

async function changeRadius(value:any,color:any) {
    console.log('点半径值: ',value,'color:',color);
    if(value >= 0.01 && value <= 0.1) {
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.PointCloudSetupRequest (value,color))
    } else if(value < 0.01) {  // 0.0
        state.value = 0.01  
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.PointCloudSetupRequest (0.01,color))
    } else if(value > 0.1){
        state.value = 0.1
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.PointCloudSetupRequest (0.1,color))
    }
}
async function changeColor(value:any,color:any) {
    console.log('颜色：',value,'color:',color);
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.PointCloudSetupRequest (value,color))
}

// 创建地图实例 
function init() {
    jsonp(`https://api.map.baidu.com/geoconv/v1/?coords=${sensorData.Default.lon.value},${sensorData.Default.lat.value}&from=1&to=5&ak=cx8IBt53e0r2Q1oPfGAIgyIAs5Hq6qj5`, {

    }).then(res => {
        // console.log(res);
        // console.log(res.result[0].x,res.result[0].y)
        state.lng = res.result[0].x
        state.lat = res.result[0].y
        console.log(state.lng, state.lat);
        //@ts-ignore
        let map = new BMapGL.Map("allmap");
        //@ts-ignore
        let point = new BMapGL.Point(res.result[0].x, res.result[0].y);  // 创建点坐标 
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom(true);
        // 创建自定义覆盖物
        //@ts-ignore
        const customOverlay = new BMapGL.CustomOverlay(createDOM, {
            //@ts-ignore
            point: new BMapGL.Point(res.result[0].x, res.result[0].y),
            opacity: 0.5,
            map: Map,
            offsetY: -10,
            properties: {
                title: 'this is a title',
                size: '100'
            }
        });
        map.addOverlay(customOverlay);
    }).catch(err => {
        console.log(err)
    })
}
// 创建自定义覆盖物DOM
function createDOM() {
    const img = document.createElement('img');
    img.style.height = '30px';
    img.style.width = '30px';
    img.style.transform = `rotate(${sensorData.Default.heading.value}deg)`;
    img.src = '/images/dw.png';
    img.draggable = false;
    return img;
}

//监听经纬度 
watch(() => sensorData.Default.lon.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        // state.lng = sensorData.Default.lon.value
        // state.lat = sensorData.Default.lat.value
        init()
    }
})
function linkBtn() {
    HomeContent.Default.sensorType.value = true
}
onMounted(() => {
    init()
});
</script>

<style scoped>
.ant-input:focus, .ant-input-focused {
    border: none;
    box-shadow: none;
}

.sectionTip {
    color: white;
    font-size: 16px;
}
:deep().ant-radio:hover .ant-radio-inner {
    border-color: #3becfb !important;
}
:deep().ant-radio-group {
    margin-left: 39px;
    font-size: 16px !important;
    margin-top: -10px;
}
:deep().ant-radio-wrapper {
    color: white;
}
:deep().ant-radio-input:focus+.ant-radio-inner {
    box-shadow: none;
    border-color: #3becfb;
}
:deep().ant-radio-inner {
    background-color: transparent;
    border: 2px solid #FFFFFF;
}
:deep().ant-radio-checked .ant-radio-inner {
    border-color: #3becfb;
}
:deep().ant-radio-inner:after {
    background-color: #3becfb;
}
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    /* background-color: black; */
}

.wpBox {
    position: absolute;
    top: 118px;
    left: 31px;
    width: 319px;
    height: 430px;
    background-image: url('/images/map_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Information {
    position: absolute;
    top: 549px;
    left: 31px;
    width: 319px;
    height: 511px;
    background-image: url('/images/sensornIformation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.videoBox {
    position: absolute;
    right: 30px;
    top: 118px;
    width: 624px;
    height: 363px;
    background-image: url('/images/videoBox.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding-top: 14px;
}

.videoBox>img {
    width: 590px;
    height: 330px;
}

.pointCloudSettings {
    position: absolute;
    left: 31px;
    top: 542px;
    width: 319px;
    height: 530px;
    background-image: url('/images/sensornIformation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.innerBox {
    margin-top: 16px;
    width: 319px;
    height: 500px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.01);
}
.tit {
    font-size: 21px;
    font-weight: bold;
    color: #FFFFFF;
    padding-left: 39px;
    padding-top: 20px;
}

.row_Infor {
    overflow: hidden;
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 10px;
    margin-left: -14px;
    margin-top: 3px;
}

.col_l {
    text-align: right;
    width: 36%;
    float: left;
}

.col_r {
    float: left;
    padding-left: 10px;
}

.row_setUp {
    overflow: hidden;
    font-size: 18px;
    color: #FFFFFF;
    margin-top: -8px;
}

.inp_l {
    width: 59%;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.inp_r {
    /* width: 160px; */
    height: 45px;
    margin-left: 10px;
    background-image: url('/images/sensor_inp_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle
}

:deep().ant-input {
    /* width: 140px; */
    width: 65px;
    background-color: transparent;
    border: none;
    height: 25px;
    color: #fff;
    margin-top: 10px;
    /* margin-left: 10px; */
    border-radius: 10px;
    text-align: center;
}
:deep().ant-input:hover {
    border: none;
}
.checkBox {
    margin-left: 40px;
    margin-top: 6px;
}

::-webkit-scrollbar {
    display: none;
}

.innerBox_tit {
    padding-top: 10px;
}

#allmap {
    width: 91%;
    height: 94%;
    margin: 0 auto;
    margin-top: 12px;
}

.outlined {
    font-size: 30px;
    color: rgb(164, 244, 255);
    position: absolute;
    right: 260px;
    top: 22px;
    background: #011e3e;
}
</style>